<template>
    <MenuPage 
        ref="menuPage"
        :columns="columns" 
        :data="data"
        :total="total"
        :page.sync="query.pageIndex"
        :size.sync="query.pageSize"
        :query="query"
        :disabled="(data => data.creator !== userId)"
        :selection.sync="selection"
        showSelectTag
        @queryFun="queryList">
        <template slot="button">
            <Poptip
                transfer
                confirm
                v-if="isRootDesigner"
                title="确定要删除选中的科研吗？"
                placement="left"
                :disabled="selection.length === 0"
                @on-ok="batchDelContent"
            >
                <Button
                type="error"
                :disabled="selection.length === 0"
                >批量删除</Button
                >
            </Poptip>
            <Button type="primary"
                    ghost
                    icon="md-add"
                    @click="showEditModal()" v-if="isRootDesigner">创建科研</Button>
        </template>
        <!-- 创建 / 修改 -->
        <EditModal ref="editModal" :formData="formData" :title="pageBtnTxt" :getOptionsData="getOptionsData" @ok="handleOk"></EditModal>
        <!-- 模板选择 -->
        <!-- <EnvironDesignModal ref="environDesignModal" @ok="search"></EnvironDesignModal> -->
    </MenuPage>
</template>
<script>
import EditModal from './edit.vue';
import { mapGetters, mapState, mapMutations } from 'vuex';
import {
    queryContentList,
    delContent,
    checkContent,
    archiveContent,
    batchDelContent
} from '../api/content.js';
import { sceneFiling } from '@/api/drill_compete.js'
import pageTitle from '@/mixin/pageTitle';
import { formDataMixin } from './formData.js'
export default {
    name: 'ResearchList',
    props: {},
    components: { EditModal },
    mixins: [ pageTitle,formDataMixin ],
    data() {
        return {
            allProject:[],
            selection:[],
            loading:false,
            query: {
                pageIndex: 1,
                pageSize: 10
            },
            columns: [
                {
                    type:'selection',
                    width:60,
                    show:() => {
                        return this.isRootDesigner
                    }
                },
                {
                    type:'link',
                    title: '名称',
                    key: 'name',
                    placement: 'top-left',
                    width: 200,
                    tooltip: true,
                    queryForm:{
                        component:'Input'
                    },
                    fun:(data) => {
                        sessionStorage.setItem(`queryObj`, this.queryObj);
                        this.$router.push({
                            name: 'design',
                            query: {
                                id: data.id,
                            },
                        });
                    }
                },
                {
                    title: '归属项目',
                    key: 'manageName',
                    placement: 'top-left',
                    width: 200,
                    tooltip: true,
                    queryForm:{
                        component:'Select',
                        optionData:() => {
                            return this.xmList.map(item => {
                                return {
                                    ...item,
                                    label:item.name,
                                    value:item.id
                                }
                            })
                        },
                        value:this.$route.params.xmId,
                        key: 'manageId'
                    }
                },
                // {
                //     type:'link',
                //     title:'科研环境',
                //     key:'projectName',
                //     tooltip:true,
                //     fun:(data) => {
                //         window.openTrain(
                //             `/jjzzTopo/index.html#/ProjectViews?projectId=${data.projectId}`
                //         );
                //     }
                // },
                {
                    title: '归档状态',
                    key: 'status',
                    // show: () => {
                    //     return this.type == 'design';
                    // },
                    render: (h, { row: { status } }) => {
                        return h('span',{
                            style:{
                                color:status ? 'var(--status-yes)' : 'var(--status-no)'
                            }
                        }, status ? '已归档' : '未归档');
                    }
                },
                {
                    title: '使用内置模板',
                    key: 'internal',
                    render: (h, { row: { internal } }) => {
                        return h('span', {
                            style:{
                                color:internal  ? 'var(--status-yes)' : 'var(--status-no)'
                            }
                        },internal ? '是' : '否');
                    },
                },
                {
                    title: '内置模板类型',
                    key: 'typeId',
                    filter: this.handleTypeRecord,
                    width: 100,
                    tooltip: true,
                },
                {
                    title: '模板名称',
                    key: 'tmplName',
                    width: 100,
                    tooltip: true,
                },
                // {
                //     title: '代码名称',
                //     key: 'codeName',
                //     width: 100,
                //     tooltip: true,
                // },
                // {
                //     title: '分支名称',
                //     key: 'codeBranchName',
                //     width: 100,
                //     tooltip: true,
                // },
                {
                    //title: '申请人',
                    title: '创建者',
                    key: 'creatorName',
                    width: 100,
                    tooltip: true,
                    // show: () => {
                    //     return this.type == 'apply';
                    // }
                },
                {
                    //title: '申请人',
                    title: '创建时间',
                    key: 'createTime',
                    width: 100,
                    tooltip: true,
                    // show: () => {
                    //     return this.type == 'apply';
                    // }
                },
                {
                    type:'html',
                    title: '描述',
                    key: 'description',
                    width: 300,
                    // tooltip: true,
                },
                // {
                //     title: '审核时间',
                //     key: 'checkTime'
                //     // show: () => {
                //     //     return this.type == 'apply';
                //     // }
                // },
                // {
                //     title: '指派时间',
                //     key: 'createTime'
                //     // show: () => {
                //     //     return this.type == 'assign';
                //     // }
                // },
                {
                    title: '操作',
                    placement: 'top-right',
                    key:'action',
                    width:160,
                    show:() => {
                        return this.isRootDesigner
                    },
                    opList:[
                        {
                            txt:'归档',
                            tooltip:true,
                            title:'确认归档？',
                            fun:this.scenefiling,// 归档操作
                            disabled:(data) => data.status === 1 || data.creator !== this.userId,
                        },
                        {
                            txt:'修改',
                            disabled: (data) => data.creator !== this.userId,
                            fun:this.showEditModal
                        },
                        {
                            txt:'删除',
                            type:'delete',
                            disabled: (data) => data.creator !== this.userId,
                            tooltip:true,
                            title: '你确定要删除吗?',
                            fun:this.delItem
                        }
                    ]
                }
            ],
            data: [],
            total: 0
        };
    },
    computed: {
        ...mapState('user', ['userId', 'isRootDesigner']),
        ...mapState('board', ['newNotice'])
    },
    watch: {
        
    },
    mounted() {
        this.queryList();
        this.queryXmList();
        // this.queryTypeRecordAll();
    },
    methods: {
        queryList() {
            let query = { ...this.query };
            let params = {
                ...query,
                creator: this.query.creator ? this.userId : '',
            };
            this.queryObj = JSON.stringify({ ...query, page: this.$route.name });
            queryContentList(params).then((res) => {
                if (res.code == 1) {
                    const data = res.data.items;
                    this.data = data;;
                    this.total = res.data.total;
                }
            }).finally(() => {
                
            });
        },
        refresh() {
            this.query = {...this._query,pageSize:this.query.pageSize}
            this.queryList();
        },
        handleOk(op) {
            op === 'add' ? this.refresh() : this.queryList();
        },
        delItem(params) {
            delContent(params.id).then((res) => {
                if (res.code == 1) {
                    this.$Message.info('删除成功!');
                    if(this.query.pageIndex > 1 && this.data.length === 1){
                        this.query.pageIndex --;
                    }
                    this.selection.splice(this.data.findIndex(item => item.id === params.id),1);
                    this.queryList();
                } else {
                    this.$Message.error(res.message);
                }
            });
        },
        batchDelContent(){
            let ids = this.selection.map(item => item.id);
            batchDelContent(ids).then((res) => {
                if (res.code == 1) {
                    this.$Message.info('删除成功!');
                    if(this.query.pageIndex > 1 && this.data.length === ids.length){
                        this.query.pageIndex --;
                    }
                    this.selection = [];
                    this.queryList();
                } else {
                    this.$Message.error(res.message);
                }
            });
        },
        showEditModal(data) {
            this.queryXmList();
            this.$refs.editModal.showModal(data);
        },
        // 归档场景信息
        scenefiling(sceneInfo) {
            return new Promise((resolve, reject) => {
                sceneFiling(sceneInfo.id,{type:16})
                    .then((data) => {
                        if (data.code == 1) {
                            this.$Message.info(data.message)
                            resolve();
                        } else {
                            this.$Message.error(data.message);
                        }
                    })
                    .catch((error) => {
                        this.$Message.error('场景信息归档异常');
                    });
            });
        }
    },
    beforeDestroy() {},
};
</script>

<style scoped>
.filter-wrap {
    font-size: 14px;
    color: var(--table-tr-hover-color);
}
</style>
